<template>
  <div class="product-add mt30">
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" label-width="200px">
      <el-form-item label="推广奖励分享标题">
        <el-input v-model="form.share_title" type="text" class="max-w460"></el-input>
      </el-form-item>
      <el-form-item label="推广奖励分享图片">
        <el-row>
          <el-button icon="el-icon-picture-outline" @click="openProductUpload('share','share')">选择图片（建议宽*高：500*400）</el-button>
          <div v-if="form.share_img_id&&form.share_img_id!=''" class="img mt10">
            <img :src="form.share_img" width="125" height="100"/>
          </div>
        </el-row>
      </el-form-item>
      <el-form-item label="首单奖励订单额起点">
        <el-input v-model="form.first_money" type="number" class="max-w460"></el-input>
        <div class="tips">填写：0为不限</div>
      </el-form-item>
      <el-form-item label="是否开启首单赠送优惠券">
        <div>
          <el-radio v-model="form.first_give_coupon" label="1">开启</el-radio>
          <el-radio v-model="form.first_give_coupon" label="0">关闭</el-radio>
          <div class="tips">首单付款完成赠送优惠券</div>
          <div v-if="form.first_give_coupon == 1">
            <el-row>
              <el-button type="primary" @click="openCoupon">选择优惠券</el-button>
              <div v-if="form.image && form.image.length > 0" class="d-s-c f-w">
                <div v-for="(item, index) in form.image" :key="index" class="img pr">
                  <a href="javascript:void(0)" class="delete-btn" @click="deleteFunc(index)"><i class="el-icon-error"></i></a>
                  <img :src="item.image" width="100" height="100" />
                  <p class="text-ellipsis">{{ item.name }}</p>
                </div>
              </div>
            </el-row>
          </div>
        </div>
      </el-form-item>

      <!--提交-->
      <div class="common-button-wrapper">
        <el-button size="small" type="primary" @click="onSubmit" :loading="loading">提交</el-button>
      </div>
    </el-form>
    <!--选择优惠券-->
    <GetCoupon v-if="iscoupon" :open_add="iscoupon" @closeDialog="closeCouponFunc($event, 'add')"></GetCoupon>
    <!--商品图片组件-->
    <Upload v-if="isProductUpload" :config="config" :isupload="isProductUpload" @returnImgs="returnProductImgsFunc">上传图片</Upload>
  </div>
</template>

<script>
import Upload from '@/components/file/Upload';
import PlusApi from '@/api/plus.js';
import GetCoupon from '@/components/coupon/GetCoupon';
export default {
  components: {
    Upload,
    /*优惠券列表组件*/
    GetCoupon
  },
  data() {
    return {
      /*form表单数据*/
      form: {
        is_open: '',
        level: '',
        self_buy: '',
        first_give_coupon: [],
        share_title: '',
        share_img_id: '',
        share_img: ''
      },
      /*是否正在加载*/
      loading: false,
      /*是否打开优惠券弹出层*/
      iscoupon: false,
      isProductUpload: false,
      file_name: 'image',
      config: {},
    };
  },
  props:{
    settingData:Object
  },
  created() {
    this.form=this.settingData.data.basic.values;
    if (!this.form.image) {
      this.form.image = [];
      this.form.become_coupon_ids = [];
    }
  },
  methods: {

    /*提交表单*/
    onSubmit() {
      let self = this;
      self.loading = true;
      let params = this.form;
      PlusApi.basic(params, true)
        .then(data => {
          self.loading = false;
          self.$message({
            message: '恭喜你，设置成功',
            type: 'success'
          });

        })
        .catch(error => {
          self.loading = false;
        });
    },
    /*优惠券列表弹出层*/
    openCoupon() {
      this.iscoupon = true;
    },
     /*关闭弹窗*/
    closeCouponFunc(e) {
      this.iscoupon = false;
      if (e.type != 'error') {
        if (this.form.become_coupon_ids.indexOf(e.params.coupon_id) == -1) {
          this.form.become_coupon_ids.push(e.params.coupon_id);
          this.form.image.push({ coupon_id: e.params.coupon_id, image: e.params.image_get,name: e.params.name });
        } else {
          this.$message({
            message: '已选择该优惠券',
            type: 'warning'
          });
        }
      }
    },
    /*删除优惠券*/
    deleteFunc(i) {
      this.form.become_coupon_ids.splice(i, 1);
      this.form.image.splice(i, 1);
    },

    /*打开上传图片*/
    openProductUpload: function (file_type, file_name) {
      this.file_name = file_name;
      if (file_type == 'image') {
        this.config = {
          total: 9,
          file_type: 'image'
        };
      } else if(file_type == 'video'){
        this.config = {
          total: 1,
          file_type: 'video'
        };
      } else if (file_type == 'share') {
        this.config = {
          total: 1,
          file_type: 'image'
        };
      }
      this.isProductUpload = true;
    },

    /*上传商品图片*/
    returnProductImgsFunc(e) {
      console.log(this.file_name)
      if (e != null) {
        if (this.file_name == 'share') {
          this.form.share_img_id = e[0].file_id;
          this.form.share_img = e[0].file_path;

        }
      }
      this.isProductUpload = false;
    },

  }
};
</script>

<style>
.tips {
  color: #ccc;
}
</style>
